<template>
  <s-layout id="layout" navbar="normal" :title="headstate.title" :autoBack="false"
  :leftIconColor="`${headstate.color}`" :leftIcon="' '" :bgColor="headstate.bgColor" :onShareAppMessage="shareInfo"
  :titleStyle="{ color: `${headstate.color}`, fontSize: '32rpx',fontWeight:'600',zIndex:'99999' }">
    <!-- 头部盒子 -->
    <view class="background"
      :style="{ backgroundImage: `url(${baseUrl}/uploads/uniapp_image/user_v1/home_bg_green.png)`, }">
      <!-- 城市定位 -->
      <view class="location area" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
      </view>
      <!-- 搜索职位 -->
      <view class="area search">
        <u-search @change="inputSearch" placeholder="搜索感兴趣的职位" :color="u_search.color"
          :searchIconColor="u_search.searchIconColor" :placeholderColor="u_search.placeholderColor"
          :borderColor="u_search.borderColor" :bgColor="u_search.bgColor" :height="'72rpx'" :showAction="false">
        </u-search>
      </view>
      <!-- 轮播图 -->
      <view class="slideshow area">
        <u-swiper :list="slideshow" indicator indicatorMode="line" circular :height="'304rpx'" :radius="'16rpx'">
        </u-swiper>
      </view>

      <view class="menu_box area">
        <!-- 公告栏 -->
        <view class="announcement">
          <image :src="`${baseUrl}/uploads/uniapp_image/user/announcement_user_index.png`" mode="scaleToFill" />
          <u-notice-bar :fontSize="'22rpx'" :color="'$uni-text-color'" :icon="''" :bgColor="'#ffffff'"
            :text="announcement" :direction="'column'"></u-notice-bar>
        </view>
      </view>
    </view>
    <fui-sticky range :top="`${safeAreaInsets?.top + 44}` ">
      <view :style="{background: `${headstate.bgColor}`}" >
        <!-- class="add_wrap" :class="{'fixed':isFixed}" -->
        <!-- 菜单 -->
        <view class="menu">
          <view class="for_menu" v-for="(item, index) in menu_one" :key="index" @tap="skipFunction(item)">
            <image :src="item.img" mode="scaleToFill" />
            <view class="title">{{ item.title }}</view>
          </view>
        </view>
        <!-- 列表头部盒子 && tabs -->
        <view class="list_top area">
          <!-- tabs切换 -->
          <up-tabs :list="tabs" @click="tabsItem" :current="state.currentTab" lineWidth="20" lineHeight="7"
            :lineColor="`url(${baseUrl}/uploads/uniapp_image/user/user_user_slidingblock.png) 100% 100%`"
            :activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)' }"
            :inactiveStyle="{ color: '#606266', transform: 'scale(1)' }"
            itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></up-tabs>
        </view>
      </view>
      <!-- 列表 -->
      <template v-slot:content>
        <view v-if="inviteList.length !== 0">
          <view class="list area">
            <!-- 列表项 -->
            <view class="list_item" v-for="item of inviteList" :key="item" @tap.stop="skipDetails(item.id)">

              <!-- 列表项头部 -->
              <view class="item_top">
                <view class="title">
                  <image :src="`${baseUrl}/uploads/uniapp_image/user/Direct_admission_title.png`" mode="scaleToFill" />
                  <view class="item_title">
                    {{ item.title }}
                  </view>
                </view>
                <view><u-icon name="arrow-right" color="#6c6f70" size="10" space="8"></u-icon></view>
              </view>
              <!-- 薪资 && 距离 -->
              <view class="salary_box">
                <!-- 薪资 -->
                <view class="salary">{{ item.salary_start }}~{{ item.salary_end }}元/月</view>
                <!-- 距离   虚位以待 -->
                <!-- <view class="distance">道外区·大于30km</view> -->
              </view>
              <!-- 结算方式 -->
              <view class="clearing_form">
                <view class="Each_way" v-for="(v, k) of item.benefits" :key="k">{{ v }}</view>
              </view>
              <!-- 列表项底部 -->
              <view class="item_bottom">
                <!-- 头像 -->
                <view class="head">
                  <image :src="`${baseUrl}${item.company.avatar}`" mode="scaleToFill" />
                  <!-- 公司 -->
                  <view class="company">
                    <view class="company_name">{{ item.company.title }}</view>
                    <view class="company_content">{{ item.address }}</view>
                  </view>
                </view>
               
              </view>
               <!-- 结算按钮 -->
               <view class="signup_button">
                <view class="share_btn" @tap.stop="onShare(item)" v-if="userStore.userInfo.group_id == 11 && item.department_id == user_department_id"
                >分享招人 </view>
              
                <view :class="item.is_apply == 0 ? 'sign_up' : 'Grey_out'" @tap.stop="signUp(item)">{{ item.is_apply ==
                    0 ? '报名' : '已报名' }}</view>
                </view>
            </view>
          </view>
          <!-- 正在加载组件 -->
          <view >
                <s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"></s-loadmore-gather>
          </view>
      </view>
     
      <!-- 缺醒图 -->
      <view v-else style="width: 100%;height: 500rpx;background-color: #ffffff;border-radius: 20rpx;">
          <u-empty :text="'暂无内容'" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
          <view class="placeholde"></view>
        </view>
    </template>
      <!-- 封装的底部弹出组件 && 此处使用的是确认报名 -->
      <s-sign-up :showPopup="showPopup" :item_data="item_data" :listitemID="list_item_id" @leftNetWork="leftNetWork"
      @rightNetWork="rightNetWork"></s-sign-up>
    </fui-sticky>
  
  </s-layout>
</template>

<script setup>
import { onLaunch, onLoad, onPullDownRefresh, onPageScroll,onReachBottom } from "@dcloudio/uni-app";
import { ref, reactive ,computed} from "vue";
import { baseUrl } from "@/sheep/config";
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
import { isEmpty } from 'lodash';

// 做安全区域样式适配
const { safeAreaInsets } = uni.getSystemInfoSync();
const userStore = sheep.$store('user');
const user_department_id = ref(0);
const page = ref(1)
const state = reactive({
  location: "哈尔滨市",
  currentTab: 0
});
const u_search = reactive({
  bgColor: "#ffffff",
  borderColor: "#ffffff",
  placeholderColor: "#666666",
  color: "#666666",
  searchIconColor: "#666666",
});
// 响应式数据  
const loading = ref(true);

onLoad((options) => {
  if(!isEmpty(userStore.userInfo.department)) {
    user_department_id.value = userStore.userInfo.department.deparment.id
  }
  // 延时2秒钟  
  uni.$u.sleep(20000).then(() => {
    loading.value = false;
  });
  if (options) {
    handleOptions(options)
  }
  page.value = 1
  inviteList.value = []
  getRecruitmentData()

  // 退出进入逻辑
  if (userStore.stayPort == 'staff' && sheep.$store('user').isLogin) {
    userStore.setActive(0)
    userStore.setStayPort('staff')
    userStore.setabPort('staff')
    sheep.$router.go('/pages/staff/index/index');
    return false;
  } else {
    userStore.setActive(0)
    userStore.setStayPort('user')
    userStore.setabPort('user')
    sheep.$router.go('/pages/user/index/index');
    return false;
  }
})


// 跳转筛选页面
const skipScreening = () => {
  sheep.$router.go('/subpackage/user/index/screen_position')
}

const handleOptions = (options) => {
  // #ifdef MP
  // 小程序识别二维码
  if (options.scene) {
    // 扫码返回到用户端 其余状态重新进入仍然为员工端
    userStore.setStayPort('user')
    userStore.setabPort('user')
    const sceneParams = decodeURIComponent(options.scene).split('=');
    options[sceneParams[0]] = sceneParams[1];
  }
  // #endif

  // 预览模板
  if (options.templateId) {
    sheep.$store('app').init(options.templateId);
  }

  // 解析分享信息
  if (options.spm) {
    $share.decryptSpm(options.spm);
  }

  // 进入指定页面(完整页面路径)
  if (options.page) {
   
    sheep.$router.go(decodeURIComponent(options.page));
  }

}


uni.$on('sharingParameter', (info) => {
  if (info) {
    handleOptions(JSON.parse(info));
  }
});

let share_options = ref(null)
const processed = ref(null)

// 轮播图
const slideshow = ref([
  `${baseUrl}/uploads/uniapp_image/user_v1/home_banner1.png`,
  // `${baseUrl}/uploads/uniapp_image/user_v1/home_banner1.png`,
  // `${baseUrl}/uploads/uniapp_image/user_v1/home_banner1.png`,
  // `${baseUrl}/uploads/uniapp_image/user_v1/home_banner1.png`,
]);

// 公告栏
const announcement = ref([
  "中远人力，专业人力资源，招募代理..",
]);

// 菜单栏数据 1
const menu_one = ref([
  {
    title: "日结",
    img: `${baseUrl}/uploads/uniapp_image/user_v1/home_quicklink_icon1.png`,
    url: '/pages/user/task/task',
  },
  {
    title: "正式工",
    img: `${baseUrl}/uploads/uniapp_image/user_v1/home_quicklink_icon2.png`,
    url: '/subpackage/user/index/menu_list',
  },
  {
    title: "已投简历",
    img: `${baseUrl}/uploads/uniapp_image/user_v1/home_quicklink_icon3.png`,
    url: '/subpackage/user/index/submitted_resume',
  },
  {
    title: "全部职位",
    img: `${baseUrl}/uploads/uniapp_image/user_v1/home_quicklink_icon4.png`,
    url: '/subpackage/user/index/menu_list',
  },
]);

// tab选项卡
const tabs = ref([
  {
    name: "全部",
    value: "",
    index: 0
  },
  {
    name: "推荐",
    value: "recommend",
    index: 1
  },
  {
    name: "热门",
    value: "hot",
    index: 2
  },
]);
// 选中样式
const activeStyle = ref({
  color: "#fff",
  fontWeight: "600",
  fontSize: "32rpx",
});
// 未选中样式
const inactiveStyle = ref({
  color: "#777777",
  fontWeight: "400",
  fontSize: "28rpx",
});

// 切换tabs
const flag = ref('')
const tabsItem = (item) => {
  state.currentTab = item.index;
  page.value = 1
  inviteList.value = []
  flag.value = item.value
  getRecruitmentData()
}

//处理距离
function getDistance(lat1, lon1, lat2, lon2) {
  const earthRadius = 6371000; // 地球半径，单位：米
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLon = (lon2 - lon1) * Math.PI / 180;
  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI /
    180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  const distance = earthRadius * c;
  return distance;
}

// 跳转详情页
const skipDetails = (id) => {
  sheep.$router.go('/subpackage/user/index/recruit_details', {
    schedule_id: id,
  })
}

// 封装招聘列表接口
const inviteList = ref([])
const current_page = ref() // 当前页
const last_page = ref()  // 最后页
const lat = ref()
const lon = ref()
const current_lat = ref()
const current_lon = ref()
const distance = ref('')
const total = ref()
// const is_apply = ref()
const getLocation = () => {
  uni.getLocation({    // 获取当前经纬度
    success: (result) => {
      current_lat.value = result.latitude
      current_lon.value = result.longitude
      getRecruitmentData()
    }
  })
}

//数据内容
const getRecruitmentData = async () => {
  let params = {
    filter: JSON.stringify({
      flag: flag.value,
      title: input_title.value
    }),
    op: JSON.stringify({
      flag: '=',
      title: 'LIKE'
    }),
    page: page.value
  }
  const res = await sheep.$api.recruit.getRecruitmentList(params)
  inviteList.value = [...inviteList.value, ...res?.data.rows]
  current_page.value = res.data.current_page
  last_page.value = res.data.last_page
  total.value = res.data.total
  inviteList.value.forEach((item) => {
    lat.value = item.lat
    lon.value = item.lon
    distance.value = getDistance(
      current_lat.value + 0.024,
      current_lon.value + 0.002482,
      lat.value,
      lon.value,
    );
    distance.value = Math.abs(distance.value - 2000)
  })
}

// 菜单跳转列表
const skipFunction = (item) => {
  sheep.$router.go(item.url, {
    title: item.title
  })
  // 处理底部tabbar跳转后未切换逻辑
  if (item.title == '日结') {
    userStore.setActive(1);
  }
}

const listdetailsData = ref({})
// 封装招聘详情接口
const getListDetailData = async (id) => {
  let params = {
    ids: id
  }
  const res = await sheep.$api.recruit.getListDetail(params)
  listdetailsData.value = res.data
}

// 报名
const showPopup = ref(false)
// 弹出
const list_item_id = ref()
const item_data = ref()
const signUp = (item) => {
  if (item.is_apply !== 1) {
    item_data.value = item
    list_item_id.value = item.id
    showPopup.value = true
  } else {
    return
  }
}
// 我在想想
const leftNetWork = () => {
  showPopup.value = false
}
// 组件报名按钮
const rightNetWork = async (id) => {
  let data = {
    recruitment_id: id,
    share_id:userStore.userInfo.id,
    share_source:1
  }

  const res = await sheep.$api.recruitment.postbmRecruitmentApply(data)
  if (res.code == 1) {
    leftNetWork() // 调用关闭弹窗组件方法
    setTimeout(() => {
      page.value = 1
      inviteList.value = []
      getRecruitmentData()
    }, 1000)

  }
}

// 输入搜索
const input_title = ref('')
const inputSearch = (e) => {
  input_title.value = e
  setTimeout(() => {
    page.value = 1
    inviteList.value = []
    getRecruitmentData()
  }, 1000)
}

// 吸顶
const scrollTop = ref(0);
const headstate = ref({
  bgColor: 'rgba(0,0,0,0)',
  color: '#fff',
  title:'',

})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;

  //  //当距离大于20的时候吸顶
  if (scrollTop.value > 0) {
    headstate.value.title = '首页'
     headstate.value.bgColor = '#fff'
    headstate.value.color = '#333'
   
  } else {
    headstate.value.title  = ''
    headstate.value.bgColor = 'rgba(0,0,0,0)'
    headstate.value.color = '#333'
  }
});

// 触底刷新
// 加载更多
const loadmoreRef = ref()
onReachBottom((e)=>{
  loadmoreRef.value.PopupScrolltolower() // 加载更多
  if (current_page.value < last_page.value) {
    page.value += 1;
  } else {
    return;
  }
  getRecruitmentData()
})
onPullDownRefresh(() => {
  page.value = 1
  inviteList.value = []
	getRecruitmentData()
	setTimeout(() => {
		uni.stopPullDownRefresh()
	}, 500);
})
//分享招人
const share = ref({
  title: '',
  address: '',
  date: '',
  id: '',
  employeeNeeds: ''
})

// /移除HTML标签
const delTag = (str) => {
  return str.replace(/<[^>]+>/g, "");
}
const onShare=(item)=>{
  console.log(item)
  let htmlContent = delTag(item.content)
  share.value.title = item.title
  share.value.address = item.address
  share.value.id = item.id
  share.value.date = `${item.start_date + '~' + item.end_date}`
  share.value.employeeNeeds = htmlContent
  showShareModal();
}
// 分享同事
const shareInfo = computed(() => {
  return sheep.$platform.share.getShareInfo(
    {
      title: share.value.title,
      desc: share.value.address,
      params: {
        page: '7',
        query: share.value.id
      },
    },
    {
      type: 'details', // 商品海报
      title: share.value.title,
      desc: share.value.address,
      signUpTime: share.value.date,
      employeeNeeds: share.value.employeeNeeds,
   
    },
  );
})
</script>

<style scoped lang="scss">


page {
  width: 100%;
  height: 100%;
}

.fixed {
  position: sticky;
  top: 74rpx;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: #fff;
}

// 版心
.area {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
}

// 头部盒子
.background {
  // height: 720rpx;
  width: 100%;
  position: relative;
  background-size: cover;
  /* 或 contain */

  // 获取定位
  .location {
    height: 70rpx;
    display: flex;
    // flex-direction: column;
    justify-content: left;
    align-items: center;
    margin-bottom: 32rpx;

    image {
      width: 28rpx;
      height: 32rpx;
      margin-top: 5rpx;
    }

    .city {
      margin-left: 8rpx;
      font-family: PingFangSC;
      color: #ffffff;
      font-weight: 500;
      font-size: $uni-font-size-big;
      font-style: normal;
      text-decoration: none;
      text-align: left;
      letter-spacing: 1rpx;
    }
  }

  // 搜索框
  .search {
    margin-bottom: 30rpx;
  }

  // 轮播图
  .slideshow {
    // height: 274rpx;
  }
}

// 中间菜单盒子
.menu_box {
  margin-top: 20rpx;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #FFFFFF;
  // box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  width: calc(100% - 40rpx);
  height: 98rpx;
  display: flex;
  align-items: center;

}

// 公告栏
.announcement {
  height: 70rpx;
  // margin-bottom: 20rpx;
  font-family: PingFangSC;
  font-weight: 500;
  font-size: 22rpx;
  font-style: normal;
  text-decoration: none;
  text-align: left;
  display: flex;
  justify-content: left;
  align-items: center;
  background-color: #ffffff;
  padding-left: 26rpx;
  width: calc(100% - 26rpx);

  image {
    height: 30rpx;
    width: 70rpx;
  }
}

// 菜单
.menu {
  display: flex;
  flex-wrap: wrap;
  // height: 160rpx;
  padding-bottom: 35rpx;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #FFFFFF;
  // box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  margin: 0 auto 20rpx auto;
  width: calc(100% - 40rpx);

  .for_menu {
    width: 25%;
    height: calc(100% - 40rpx);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    image {
      width: 100rpx;
      height: 100rpx;
    }

    .title {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: 500;
      font-size: $uni-font-size-26;
      font-style: normal;
      text-decoration: none;
    }
  }
}

// 列表

// 列表头部盒子
.list_top {
  display: flex;
  width: calc(100% - 80rpx);
  height: 110rpx;
  align-items: center;
  background-color: #ffffff;
  // border-bottom: 2rpx solid #f4f4f4;
  padding-left: 20rpx;
  padding-right: 20rpx;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;

  // 筛选
  .screen {
    display: flex;
    width: 80rpx;
    height: 56rpx;
    border-radius: 16rpx;
    border: 3rpx solid $uni-color-primary;
    text-align: center;
    line-height: 56rpx;
    font-family: PingFangSC;
    color: $uni-color-primary;
    font-weight: $uni-font-weight;
    font-size: $uni-font-size-sm;
    font-style: normal;
    text-decoration: none;
    margin-left: auto;
    /* 右侧盒子靠右对齐 */
    padding-left: 20rpx;

    .icon {
      margin-left: 10rpx;
    }
  }
}


.list {
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  background-color: #ffffff;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  width: calc(100% - 80rpx);

  // 列表项
  .list_item {
    // height: 300rpx;  
    width: 100%;
    border-bottom: 2rpx solid #f4f4f4;

    // 列表项头部
    .item_top {
      height: 44rpx;
      padding-top: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        display: flex;
        align-items: center;
      }

      image {
        width: 48rpx;
        height: 32rpx;
        margin-top: 5rpx;
      }

      .item_title {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: $uni-font-size-big;
        font-style: normal;
        text-decoration: none;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 5rpx;
      }
    }

    // 薪资 && 距离
    .salary_box {
      margin-top: 20rpx;
      height: 42rpx;
      display: flex;
      justify-content: space-between;
      /* 左右对齐 */
      line-height: 42rpx;
      padding: 0 30rpx 0 10rpx;

      // 薪资
      .salary {
        font-family: PingFangSC;
        color: #FF0000;
        font-weight: $uni-font-weight;
        font-size: 30rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
      }

      // 距离
      .distance {
        font-family: PingFangSC;
        color: #888888;
        font-weight: 400;
        font-size: $uni-font-size-26;
        font-style: normal;
        text-decoration: none;
        text-align: right;
      }
    }

    // 结算方式
    .clearing_form {
      height: 48rpx;
      display: flex;
      margin-top: 20rpx;

      // 每一种结算方式
      .Each_way {
        height: 100%;
        padding: 0 10rpx;
        border-radius: 4rpx;
        background-color: #f9f9f9;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: 400;
        font-size: $uni-font-size-26;
        font-style: normal;
        text-decoration: none;
        text-align: left;
        text-align: center;
        line-height: 48rpx;
        margin: 0 10rpx;
      }
    }

    // 列表项底部
    .item_bottom {
      display: flex;
      height: 64rpx;
      margin-top: 20rpx;
      padding-left: 10rpx;
      justify-content: space-between;

      // 头像
      .head {
        height: 64rpx;
        display: flex;

        image {
          width: 64rpx;
          height: 64rpx;
        }

        // 公司
        .company {
          height: 100%;
          margin-left: 20rpx;

          .company_name {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: 500;
            font-size: $uni-font-size-26;
            font-style: normal;
            text-decoration: none;
            text-align: left;
          }

          .company_content {
            font-family: PingFangSC;
            color: #999999;
            font-weight: 400;
            font-size: 20rpx;
            font-style: normal;
            text-decoration: none;
            width: 50vw;
            white-space: nowrap;
            /* 不换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
          }
        }
      }

     
    }
     // 结算按钮
     .signup_button {
        padding-right: 10rpx;
        height: 100rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
     
        .sign_up {
          width: 150rpx;
          height: 60rpx;
          border-radius: 32rpx;
          background-color: #FFEA00;
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: $uni-font-weight;
          font-size: 30rpx;
          font-style: normal;
          text-decoration: none;
          line-height: 60rpx;
          text-align: center;
        }
        .share_btn{

    width: 150rpx;
    height: 60rpx;
    border-radius: 32rpx;
    background: linear-gradient(to right, #0038F7, #4d8bff);
    line-height: 60rpx;
    text-align: center;
    color: #ffffff;
    font-weight: 500;
    font-size: 26rpx;
    margin-right: 20rpx;
        }
        // 置灰
        .Grey_out {
          width: 150rpx;
          height: 60rpx;
          border-radius: 32rpx;
          border: none;
          background: linear-gradient(90deg, rgba(152, 156, 158, 1) 0%, rgba(120, 124, 125, 1) 100%);
          font-family: PingFangSC;
          color: #ffffff;
          font-weight: $uni-font-weight;
          font-size: 30rpx;
          font-style: normal;
          text-decoration: none;
          text-align: left;
          line-height: 60rpx;
          text-align: center;
        }
      }
  }
}


::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

:deep(.page-app)  {
  .navbar{
    z-index: 99999 !important;
  }
}
</style>
